<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>店铺-订单明细</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/reg_style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="css/ljq.css" />
		<link rel="stylesheet" type="text/css" href="css/hgs-date.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/ljq-post.css"/>
		<style>
			.tupian {
				width: 100%;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 999;
			}
			
			.lan {
				width: 100%;
				height: 1.83rem;
				background: url(img/beijing.png)no-repeat center center;
			}
			
			.bai {
				width: 100%;
				height: 0.7rem;
				background: #fff;
			}
			
			.beijing {
				width: 100%;
				padding-top: 0.2rem;
			}
			
			.shuju1 {
				background: #fff;
				border-radius: 5px;
				box-shadow: 1px 1px 1px rgba(65, 152, 255, 0.2);
				width: 90%;
				padding-top: 0.15rem;
				padding-bottom: 0.15rem;
				position: absolute;
				top: 1.13rem;
				left: 5%;
				text-align: center;
			}
			
			.time {
				margin-top: 0!important;
			}
			
			.shuju1 .zhichuleixing {
				display: block;
				width: 100%;
				text-align: center;
				font-size: 0.16rem;
				color: #4D4D4D;
				margin-top: 0.25rem;
				height: 0.17rem;
				line-height: 0.17rem;
			}
			
			.shuju1 .zhichujine {
				display: block;
				width: 100%;
				text-align: center;
				margin-top: 0.2rem;
				font-size: 0.31rem;
				color: #FF6648;
				height: 0.31rem;
				line-height: 0.31rem;
			}
			
			.shuju2 {
				width: 90%;
				margin: 0 auto;
				padding-bottom: 0.07rem;
				margin-top: 0.07rem;
				border-bottom: 1px solid #ddd;
			}
			
			.shuju2 img {
				float: left;
				width: 0.4rem;
				height: 0.4rem;
				border-radius: 50%;
				margin-top: 0.1rem;
			}
			
			.shuju2_div {
				float: left;
				width: 81%;
				margin-left: 0.1rem;
				/*height: 0.64rem;*/
			}
			
			/*.shuju2:first-child .shuju2_div {
				margin-top: 0.15rem;
			}
			
			.shuju2:first-child img {
				margin-top: 0.25rem;
			}*/
			
			.shuju2:first-child {
				margin-top: -0.1!important;
			}
			
			.shuju2_div .name {
				display: block;
				font-size: 0.12rem;
				color: #4D4D4D;
			}
			.shuju2_div .noname {
				display: block;
				font-size: 0.12rem;
				color: #808080;
			}
			
			.shuju2_div div {
				margin-top: 0.05rem;
			}
			
			.shuju2_div div .span_left {
				float: left;
				font-size: 0.09rem;
				color: #808080;
			}
			
			.shuju2_div div .span_right {
				float: right;
				font-size: 0.09rem;
				color: #808080;
			}
			
			.shuju2_div div em {
				float: right;
				font-size: 0.14rem;
				color: #4D4D4D;
			}
			
			.shuju2_div .bianhao {
				display: block;
				font-size: 0.09rem;
				color: #808080;
			}
			
			.yes {
				display: block;
				width: 85%;
				margin: 0 auto;
				text-align: center;
				background: #4198FF;
				height: 0.44rem;
				line-height: 0.44rem;
				font-size: 0.14rem;
				color: #fff;
				margin-top: 1rem;
				border-radius: 5px;
			}
			
			.search {
				width: 95%;
				margin: 0 auto;
				height: 0.28rem;
				margin-top: 0.35rem;
				border-radius: 6px;
				background: url(img/search_banner.png)no-repeat center center!important;
				position: relative;
			}
			
			input[type=search] {
				background: url(img/sousuo.png)no-repeat center left!important;
				background-size: 0.15rem!important;
				margin-left: 0.15rem!important;
				text-indent: 0.15rem;
				text-align: left;
				color: #fff;
				opacity: 0.6;
			}
			
			.search em {
				position: absolute;
				top: 0.065rem;
				right: 0.15rem;
				width: 0.14rem;
				height: 0.14rem;
				background: url(img/clear.png)no-repeat center center;
				background-size: 0.14rem;
				opacity: 0.5;
			}
			
			input::-webkit-input-placeholder {
				color: #fff;
				text-align: left;
				opacity: 0.6;
			}
			
			input::-moz-placeholder {
				color: #fff;
				text-align: left;
				opacity: 0.6;
			}
			
			input:-ms-input-placeholder {
				color: #fff;
				text-align: left;
				opacity: 0.6;
			}
			
			.mui-content .zong .em4 {
				width: 1.8rem!important;
			}
		</style>
	</head>

	<body>
		<div class="main0">
			<div class="tupian">
				<div class="lan">
					<div class="head2">
						<em class="mui-action-back"><img class="img1" src="img/fanhui1.png" alt="" /></em>
						<div class="div2"><span class="span3">订单明细</span></div>
						<img class="img2 tiao_shaixuan" src="img/shaixuan.png" alt="" />
					</div>
					<div class="beijing">
						<div class="search">
							<input id="xsearch" onclick="btn_search_click();" type="search" class="tiao_sousuo" placeholder="请输入客户姓名或者订单编号">
							<em style="display: none;"></em>
						</div>
					</div>
				</div>
				<div class="shuju1">
					<div class="time clearfix">
						<em onclick="databian('jie');" id="index-date-left" class=" mui-icon mui-icon-back a2"></em>
						<span onclick="btn_date_show();" id='index-date-show'></span>
						<em id="index-date-right" onclick="databian('jia');" class=" mui-icon mui-icon-forward a2"></em>
					</div>
					<span class="zhichuleixing" id="zhichuleixing">总收入</span>
					<em class="zhichujine" id="total_price"></em>
				</div>
				<div class="bai"></div>
			</div>

			<div class="mui-content">
				<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="border:0px solid palevioletred;">
					<div class="mui-scroll" style="border:0px solid #0000CC;">
						<ul class="" id="box_zhifumingxi1_list" style="padding-top: 2.45rem;padding-left:0;">

						</ul>
					</div>
				</div>

				<!--<div id="box_zhifumingxi1_list" style="padding-top: 2.45rem;">
					
				</div>-->
			</div>
		</div>

		<!--
            	作者：offline
            	时间：2017-12-29
            	描述：筛选
            -->
		<div class="shaixuan" style="display: none;">
			<header class="mui-bar mui-bar-nav head1">
				<img class="img1 tiao_main0" src="img/fanhui.png" alt="" />
				<div class="div1"><span class="span0" id="list-shop-lists" onclick="user_select_shop();">筛选</span></div>
				<input id="index-shop-lists-id" type="hidden">
				<input id="index-shop-lists" type="hidden">
			</header>
			<div class="mui-content">
				<div class="zong">
					<div class="div4 clearfix">
						<span class="span4">选择时间</span>
						<em class="em4 em4_time" id="em4_time" onclick="btn_date_show_before();"></em>
					</div>
					<div class="div4 clearfix">
						<span class="span4">客户类型</span>
						<em class="em4" onclick="xtype0();" id="xtype">所有客户</em>
						<input id='xtype0_id' type="hidden" />
					</div>
				</div>
				<span class="yes jianbian3_shengse" onclick="btn_search_down();">确定</span>
			</div>
		</div>

		<!--/********************日期控件**************************/-->
		<!--<link rel="stylesheet" type="text/css" href="css/hgs-date.css" />
		<script src="js/hgs-date.js"></script>-->
		<!--/********************日期控件**************************/-->
		<input id="index-shop-lists-id" type="hidden">
		<input id="index-shop-lists" type="hidden">
		<input id='index-end-date' type="hidden" />
		<input id='index-start-date' type="hidden" />

		<!--/***************************************************/-->

		<script src="js/mui.min.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/app.js"></script>
		<!--<script type="text/javascript" src="js/jsencrypt.min.js"></script>
		<script src="js/md5.js"></script>-->
		<script src="js/crypto-js.js"></script>
		<script src="js/jquery.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/fuction.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="js/echarts.js"></script>
		<script src="js/hgs-date.js"></script>
		<script type="text/javascript">
			mui.init();
		</script>
		<script>
			var xout = 0;
			var count = 0;
			var pagenum = 10;
			var totalnum = 20;
			var pagesize = Math.floor(totalnum / pagenum);

			var picker = new mui.PopPicker();

			mui.ready(function() {
				//获取当前的客户数据
				xminereadyload();

				//获取当天的日期	
				var xtoday = GetDateStr(0);
				mui("#index-date-show")[0].innerHTML = xtoday;
				mui("#index-start-date")[0].value = xtoday;
				mui("#index-end-date")[0].value = xtoday;
				mui("#em4_time")[0].innerHTML = xtoday;

				user_info.look_start_date = xtoday;
				user_info.look_end_date = xtoday;

				user_info.ddmx_xtype = '';
				user_info.ddmx_xsearch = '';

				//获取订单明细或订单流水

				//fun_order_lists('', xtoday, xtoday, '');新客户，老客户，所有客户，回头客

				var position_json = [{
					value: 0,
					text: '所有客户'
				}, {
					value: 1,
					text: '新客户'
				}, {
					value: 2,
					text: '老客户'
				}];
				//console.log(position_json);
				picker.setData(position_json);

			});

			//打开日历界面
			function btn_date_show_before() {
				btn_date_show();

			}

			/********************日期控件**************************/
			//打开日历界面
			function btn_date_show() {
				$("#date_mbanner").show();
			}

			//确定选择日期
			function btn_date_submit() {
				judge_date_input();

				var xstartdate = user_info.look_start_date;
				var xenddate = user_info.look_end_date;
				//获取订单明细或订单流水
				fun_order_lists('', xstartdate, xenddate, '');
			}
			/********************日期控件**************************/

			//变化日期的加减
			function databian(jiajie) {
				new_databian(jiajie, "#index-date-show"); //--------------------------------------------------->>>>>>>有日期选择的页面可以要
				var xstartdate = user_info.look_start_date;
				var xenddate = user_info.look_end_date;
				//获取订单明细或订单流水
				fun_order_lists('', xstartdate, xenddate, '');

			}

			//获取店铺信息-获取订单明细或订单流水
			function fun_order_lists(xtype, xstartdate, xenddate, xsearch) {
				xout = 0;
				count = 0;
				pagenum = 10;
				totalnum = 50;
				pagesize = Math.floor(totalnum / pagenum);

				user_info.ddmx_xtype = xtype;
				user_info.ddmx_xsearch = xsearch;

				$("#box_zhifumingxi1_list").html("");
				mui('#pullrefresh').pullRefresh().refresh(true);
				pullupRefresh();
			}

			//获取订单明细或订单流水
			function order_lists(count, pagenum) {
				var xbx = {}; //登录后的参数对象AES加密
				xbx.shop_id = user_info.look_shop_id; //是 店铺ID
				xbx.type = user_info.ddmx_xtype;
				xbx.start_date = user_info.look_start_date;
				xbx.end_date = user_info.look_end_date;
				xbx.search = user_info.ddmx_xsearch;
				xbx.cashier_desk = '';
				xbx.cashier = '';
				xbx.page = count;
				xbx.limit = pagenum;

				official_login_after(url_host + 'order/lists', xbx, 'order_lists');
			};

			//查询界面
			function btn_search_down() {
				var xtype = mui("#xtype")[0].innerHTML;
				var xstartdate = user_info.look_start_date;
				var xenddate = user_info.look_end_date;
				//获取订单明细或订单流水
				fun_order_lists(xtype, xstartdate, xenddate, '');
				var xtypename=$("#xtype").html();
				(xtypename=="所有客户")?xtypename="总收入":xtypename=xtypename;
				$("#zhichuleixing").html(xtypename);
				$(".shaixuan").hide();
				$(".main0").show();
			}

			//查询界面
			function btn_search_click() {
				var xsearch = mui("#xsearch")[0].value;
				//获取订单明细或订单流水
				fun_order_lists('', '', '', xsearch);
			}

			//选择框
			function xtype0() {
				picker.show(function(SelectedItem) {
					mui("#xtype")[0].innerHTML = SelectedItem[0].text;
					mui("#xtype0_id")[0].value = SelectedItem[0].value;
				})
			}

			$(document).ready(function() {
				$(".tiao_shaixuan").click(function() {
					$(".main0").hide();
					$(".shaixuan").show();
				})
				$(".tiao_main0").click(function() {
					$(".shaixuan").hide();
					$(".main0").show();
				})
				$('.search input').click(function() {
					$('.search em').show();
				})

				$(".search em").click(function() {
					$(".search input").val('');
					//获取订单明细或订单流水
					fun_order_lists('', user_info.look_start_date, user_info.look_end_date, '');
				})
			})
		</script>

		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});

			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > pagesize)); //参数为true代表没有更多数据了。

					//获取订单明细或订单流水
					order_lists(count, pagenum);

				}, 800);
			}
			if(mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 1000);

				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}
			$(function() {
				//mui触屏点击
				$("#pullrefresh").on('tap', 'li', function(event) {
					var url = $(this).attr("data-url");
					location.href = url;
				});
			});
		</script>
	</body>

</html>